<script setup lang="ts">
import { traduction } from '@/utils/language';
import { Ref, toRefs, onMounted, ref } from 'vue';
import DataList from '@/components/DataList/DataList.vue';
import { showDataT } from '@/model/System/power-interface';
const props = defineProps({
  data: {
    required: true,
    type: Object,
    default: () => {
      return {};
    },
  },
});
const { data } = toRefs(props);
let infoData = data?.value;
let showList: Ref<showDataT[]> = ref([]);

// 加工数据展示字段
const labels = {
  Manufacturer: 'COMMON_MANUFACTURER',
  Model: 'COMMON_TYPE',
  ManufactureDate: 'INFO_WARRANTY_MANUFACTURE_DATE',
  SerialNumber: 'COMMON_SERIALNUMBER',
  FirmwareVersion: 'COMMON_FIXED_VERSION',
  PowerCapacityWatts: 'POWER_CAPACITY_WATTS',
  LineInputVoltage: 'POWER_LINE_INPUT_VOLTAGE',
  OutputVoltage: 'POWER_OUTPUT_VOLTAGE',
};
function getValue(obj, key) {
  if (['LineInputVoltage', 'OutputVoltage'].includes(key)) {
    return `${obj[key]} V`;
  } else if (['PowerCapacityWatts'].includes(key)) {
    return `${obj[key]} W`;
  } else {
    return obj[key] || '--';
  }
}
function init() {
  const renderData = Object.entries(labels)
    .filter(
      ([key]) => (infoData[key] !== undefined && infoData[key] !== null) || infoData[key] === 0,
    )
    .map(([key, label]) => ({
      label: traduction(label),
      value: getValue(infoData, key),
    }));
  
  renderData.unshift({
    label: traduction('POWER_SLOT'),
    value: infoData?.Name?.replace('PowerConverter', ''),
  });

  showList.value = renderData;
}

onMounted(() => {
  init();
});
</script>

<template>
  <div :id="'powerInfo' + data.id" class="card-box">
    <div class="title">
      <div class="title-left">
        <div class="power-name">
          {{ traduction('POWER_CONVERTER_NAME') }}{{ infoData?.Name?.replace('PowerConverter', '') }}
        </div>
      </div>
      <div v-if="infoData?.InputWatts || infoData?.InputWatts === '' || infoData?.InputWatts === 0" class="title-right">
        <div class="power-com">
          <div v-addTooltip.perLine class="power-current">
            {{ $t('POWER_CURRENT') }}
          </div>
          <div class="power-unit">W</div>
        </div>
        <el-tooltip
          trigger-keys
          :content="
            infoData?.InputWatts || infoData?.InputWatts === 0 ? infoData?.InputWatts : '--'
          "
        >
          <div class="power-num">
            {{ infoData?.InputWatts || infoData?.InputWatts === 0 ? infoData?.InputWatts : '--' }}
          </div>
        </el-tooltip>
      </div>
    </div>
    <div class="content">
      <DataList :id="'powerDataList' + data.id" :columns-num="1" :data-list="showList" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.card-box {
  background: var(--o-bg-color-light);
  border-radius: var(--o-border-radius);
  min-height: 424px;
  width: calc(25% - 16px);
  min-width: 300px;
  .title {
    height: 72px;
    padding: 16px 24px;
    border-bottom: solid 1px var(--o-border-color-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
    .title-left {
      display: flex;
      align-items: center;
      .power-name {
        font-size: 16px;
        font-weight: 800;
        height: 24px;
        line-height: 24px;
        margin-right: 8px;
      }
    }
    .title-right {
      display: flex;
      align-items: center;
      height: 100%;
      .power-com {
        color: var(--o-text-color-secondary);
        font-size: 12px;
        display: flex;
        flex-direction: column;
        height: 40px;
        line-height: 40px;
        justify-content: center;
        align-items: flex-end;
        .power-current {
          height: 16px;
          line-height: 16px;
          max-width: 86px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .power-unit {
          height: 16px;
          line-height: 16px;
        }
      }
      .power-num {
        height: 40px;
        width: auto;
        max-width: 100px;
        line-height: 40px;
        font-size: 32px;
        font-weight: 500;
        margin-left: 8px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
  .content {
    padding: 24px;
    min-height: 352px;
    .cont-list {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      font-size: 12px;
      .name {
        display: inline-block;
        width: 48px;
        color: var(--o-text-color-secondary);
        margin-right: 24px;
      }
    }
  }
}
</style>
